<template>
	<view class="goodsinfo">
		<view class="header">
			<image @tap="backCatogory" src="../../../assets/images/arr-l.png" mode=""></image>
		</view>

		<swiper :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500" class="swiper">
			<swiper-item v-for="item in swiper" :key="item">
				<image :src="item" mode=""></image>
			</swiper-item>
		</swiper>

		<view class="collect" @tap="collect">
			<image src="../../../assets/images/collect.png" mode=""></image>
		</view>
		<view class="infos">
			<text>{{ list.detail_title }}</text>
			<text>{{ list.detail_desc }}</text>
			<text>￥{{ list.price_now }}</text>
			<!-- <rich-text :nodes = "list.content"></rich-text> -->
			<text>{{ list.content }}</text>
		</view>
		<view class="footer">
			<view class="left">
				<image src="../../../assets/images/kf.png" mode=""></image>
			</view>
			<view class="right">
				<view @tap="addCart">
					添加到购物车
				</view>
				<view @tap="buyCart">
					立即购买
				</view>
			</view>
		</view>

		<cart ref="card" :sku-list = "skuList"  :list = "list" :id="Id"  ></cart>
		<!-- <Cart ref="card" :cardDataInfo="cardDataInfo"></Cart> -->
		<!-- <cart ref = "card" :cardInfo = "cardInfo"></cart> -->
	</view>
</template>


<script>
	import http from "../../../utils/http.js"
	import cart from "@/components/cart/cart.vue"
	// import Cart from './components/card.vue'
	// import cart from './components/cart.vue'
	export default {
		// props:["num"],
		components: {
			cart
		},
		data() {
			return {
				list: {},
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				swiper: [],
				show: "2",
				Id: '',
				skuList: [], // sku列表
				// productDetai:{} , // 商品明细
				// cardDataInfo: {}, // 渲染卡片需要的数据
				productObj:{}, //商品明细
				cardInfo:{}, // 渲染卡片需要的数据
			};
		},
		methods: {
			backCatogory() {
				uni.navigateBack({
					delta: 1
				})
			},
			collect() {
				uni.showToast({
					title: '已收藏',
					duration: 2000
				});
			},
			// 因为添加购物车和立即购买都要共用一个模态框,就要判断是立即购买还是添加购物车,根据
			// this.arr.status为"1"或者"2"去判断,为1就调接口,添加购物车,为2的话就在模态框直接跳转到订单列表
			// 添加购物车
			addCart() {
				this.$refs.card.openCard(0);
				// this.show = 1;
				// this.Id= "1"
			},
			// 立即购买
			buyCart() {
				this.$refs.card.openCard(1);
			},
			// getCard() {
			// 	this.cardInfo={
			// 		gname:this.productObj.gname,
			// 		skuList:this.productObj.skuList,
			// 	},
			// 	var imgs = this.productObj.imgs.split(",");
			// 	for(var i = 0; i < this.cardInfo.skuList.length; i++){
			// 		// this.cardInfo.skuList.img[i] = img[i];
			// 		if(img[i]){
			// 			this.carInfo.skuList.img[i] = img[i];
			// 		}
			// 	}
				
			// }
			// getcloseCard(){
			// 	this.show = 2;
			// 	this.$refs.card.closeCard();
			// },
			// 用于对返回的数据进行格式化 传入 card组件
			// buildCardDataInfo(){
			// 	this.cardDataInfo  = {
			// 		gname: this.productDetai.gname,
			// 		descr: this.productDetai.descr,
			// 		skuList: this.productDetai.skuList
			// 	}
			// 	// 构建图片
			// 	var imgs = this.productDetai.imgs.split(',');
			// 	for(var i = 0 ; i < this.cardDataInfo.skuList.length ; i ++){
			// 		if(imgs[i]){
			// 			this.cardDataInfo.skuList[i].img = imgs[i]
			// 		}
			// 	}
					
			// }
		},
		onLoad(options) {
			console.log(options);
			this.Id = options.id;
			http.get("/api/leju/front/product/detail", {
				productId: options.id
			}).then(res => {
				console.log(res);
				this.list = res.data.data;
				// // 存入
				// this.productDetai = res.data.data;
				// // 渲染卡片需要的数据
				// this.buildCardDataInfo();
				//需要用这个数值
				// this.productList = res.data.data;
				// 渲染弹出框需要的数据,需要将数据传进去
				// this.getCard();
				if (res.data.data.skuList) {
					this.skuList = res.data.data.skuList
					console.log('skuList', this.skuList)
				}
				if (this.list.imgs) {

					this.swiper = res.data.data.imgs.split(",");
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	.goodsinfo {
		position: relative;
		width: 750rpx;
		height: 100vh;
		background-color: wheat;
		padding: 0.01rpx;

		.header {
			width: 100%;
			height: 80rpx;
			background: #5D4E49;

			position: fixed;
			left: 0;
			top: 0;
			z-index: 999;

			image {
				position: absolute;
				left: 33rpx;
				top: 28rpx;
				width: 24px;
				height: 38rpx;
			}
		}

		.swiper {
			// position:relative;
			width: 750rpx;
			height: 650rpx;
			margin-top: 80rpx;

			.swiper-item {
				width: 750rpx;
				height: 650rpx;
			}

			image {
				width: 100%;
				height: 100%;
			}
		}

		.collect {
			width: 100rpx;
			height: 100rpx;
			background-color: #5D4E49;
			border-radius: 50%;
			position: absolute;
			right: 96rpx;
			top: 680rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				display: block;
				width: 44rpx;
				height: 44rpx;
			}
		}

		.infos {
			width: 80%;
			padding: 80rpx;

			text {
				display: block;
			}

			text:nth-child(1) {
				font-size: 36.4rpx;
				color: #3E3E3E;
				letter-spacing: 2.6rpx;
				font-weight: bolder;
			}

			text:nth-child(2) {
				font-size: 30.8rpx;
				color: #B0B0B0;
				letter-spacing: 2.2rpx;
				margin-bottom: 23rpx;
			}

			text:nth-child(3) {
				font-size: 36.4rpx;
				color: #3E3E3E;
				letter-spacing: 2.6rpx;
				margin-bottom: 80rpx;
			}

			text:nth-child(4) {
				font-family: PingFangSC-Regular;
				font-size: 28rpx;
				color: #8A8A8A;
				letter-spacing: 2px;
				text-align: justify;
			}
		}

		.footer {
			width: 750rpx;
			height: 120rpx;
			background-color: #FFFFFF;
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				width: 50rpx;
				height: 50rpx;
				margin-left: 80rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.right {
				margin-right: 80rpx;
				display: flex;
				width: 450rpx;
				height: 120rpx;
				justify-content: space-around;
				align-items: center;

				view:nth-child(1) {
					width: 250rpx;
					height: 80rpx;
					background-color: gray;
					line-height: 80rpx;
					text-align: center;
					// border-radius:40rpx;
				}

				view:nth-child(2) {
					width: 200rpx;
					height: 80rpx;
					background-color: red;
					line-height: 80rpx;
					text-align: center;
					// border-radius:40rpx;
				}
			}
		}


		.cartinfo {
			width: 750rpx;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			background: gray;

			.enter {
				width: 628rpx;
				height: 924rpx;
				background-color: #FFFFFF;
				border-radius: 40rpx;
				opacity: 1.0;

				.header {
					width: 100%;
					height: 136rpx;
					display: flex;
					justify-content: space-evenly;
					align-items: center;
					margin-bottom: 54rpx;

					.left {
						width: 192rpx;
						height: 192rpx;
						margin-top: -56rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 20rpx;
						}
					}

					.middle {
						width: 223rpx;
						height: 80rpx;

						text {
							display: block;
						}

						.gname {
							font-size: 28rpx;
							color: #3E3E3E;
							letter-spacing: 2rpx;
							font-weight: bolder;
							margin-bottom: 6rpx;
						}

						.count {
							font-family: PingFangSC-Regular;
							font-size: 24rpx;
							color: #B0B0B0;
							letter-spacing: 1.71rpx;
						}

					}

					.right {
						width: 42rpx;
						height: 42rpx;

						// margin-top:40rpx;
						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.colortext {
					width: 500rpx;
					margin-left: 50rpx;
					margin-bottom: 50rpx;

					text {
						display: block;
						font-family: PingFangSC-Semibold;
						font-size: 28rpx;
						color: #3E3E3E;
						letter-spacing: 2rpx;
						margin-left: 20rpx;
						font-weight: bolder;
					}

					.color {
						width: 242rpx;
						height: 60rpx;
						margin-top: 16rpx;
						// opacity: 0.06;
						background: #354E44;
						border-radius: 10rpx;
						font-size: 26rpx;
						line-height: 60rpx;
						text-align: center;
						color: white;
						letter-spacing: 1.86px;
					}
				}

				.service {
					width: 500rpx;
					margin-left: 50rpx;

					text {
						display: block;
						font-family: PingFangSC-Semibold;
						font-size: 28rpx;
						color: #3E3E3E;
						letter-spacing: 2rpx;
						margin-left: 20rpx;
						font-weight: bolder;
					}

					.first {
						width: 380rpx;
						height: 60rpx;
						margin-top: 16rpx;
						// opacity: 0.06;
						background: #354E44;
						border-radius: 10rpx;
						font-size: 26rpx;
						line-height: 60rpx;
						text-align: center;
						color: white;
						letter-spacing: 1.86px;
					}

					.second {
						width: 380rpx;
						height: 60rpx;
						margin-top: 16rpx;
						// opacity: 0.06;
						background: #354E44;
						border-radius: 10rpx;
						font-size: 26rpx;
						line-height: 60rpx;
						text-align: center;
						color: white;
						letter-spacing: 1.86rpx;
					}
				}

				.addcount {
					width: 100%;
					height: 120rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 40rpx auto 40rpx;
					border: 2rpx solid #979797;

					.left {
						font-family: PingFangSC-Semibold;
						font-size: 28rpx;
						color: #3E3E3E;
						letter-spacing: 2rpx;
						margin-left: 20rpx;
						font-weight: bolder;
						margin-left: 50rpx;
					}

					.right {
						width: 170rpx;
						height: 40rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-right: 50rpx;

						view {
							background: gray;
							color: white;
						}

						.right-l {
							width: 40rpx;
							height: 40rpx;
							background: gray;
							color: white;
							border-radius: 50%;
							line-height: 40rpx;
							text-align: center;
						}

						.right-m {
							width: 50rpx;
							height: 40rpx;
							background: gray;
							color: white;
							font-size: 8rpx;
							text-align: center;
						}

						.right-r {
							width: 40rpx;
							height: 40rpx;
							background: red;
							color: white;
							border-radius: 50%;
							line-height: 40rpx;
							text-align: center;
						}

					}
				}

				.button {
					width: 208rpx;
					height: 88rpx;
					background: #354E44;
					border-radius: 14px;
					margin: 0 auto;
					font-family: PingFangSC-Semibold;
					font-size: 32rpx;
					color: #FFFFFF;
					letter-spacing: 2.29rpx;
					line-height: 88rpx;
					text-align: center;
					font-weight: bolder;
				}
			}

		}


	}
</style>
